<template>
  <view>
    <view class="m-t-b">
      <u-search @search="onSearch" search-icon="/static/tduck/s.png" shape="square" placeholder="搜索" bg-color="#fff"
        :show-action="false" />
    </view>
    <scroll-view class="scroll-Y" scroll-y="true" @scrolltolower="lower" :scroll-top="scrollTop" @scroll="scroll">
      <view class="list flex flex-wrap">
        <view class="list-item" v-for="(item) of list" :key="item.id">
          <view class="list-item-body">
            <view class="type-name">
              <view class="form-name u-line-1">{{ item.formName}}</view>
              <view>
                <u-tag mode="dark" text="表单" v-if="item.type==1" />
                <u-tag mode="dark" text="流程" type="warning" v-if="item.type==2" />
                <u-tag mode="dark" text="考试" type="success" v-if="item.type==3" />
				<u-tag text="考试" mode="dark" type="success" v-if="item.type==4" />
				<u-tag text="营销" mode="dark" type="success" v-if="item.type==5" />
              </view>
            </view>
            <view class="form-status">
              <u-badge :is-dot="true" :absolute="false" type="primary" v-if="item.formStatus==1"></u-badge>
              <u-badge :is-dot="true" :absolute="false" type="success" v-if="item.formStatus==2"></u-badge>
              <u-badge :is-dot="true" :absolute="false" type="error" v-if="item.formStatus==4"></u-badge>
			  <u-badge :is-dot="true" :absolute="false" type="primary" v-if="item.formStatus==5"></u-badge>
			  <text class="tag">{{item.formStatusDesc}}</text>
            </view>
            <view class="body" slot="body">
              <view class="u-m-t-20">
                <text class="time">
                  创建时间：{{ item.createTime }}
                </text>
              </view>
            </view>
            <view class="flex form-btn">
              <u-icon name="edit-pen" label-size="24" size="30" color="#5677fc" label="去填写"
                @click="$u.route('/pages/form/write/index?formKey='+item.formKey)">
              </u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="m-t">
        <u-empty v-if="!list.length" src="/static/tduck/null.png" text="没有数据了" mode="list" />
        <view v-if="list.length < total && loadStatus !=='nomore'" class="loadmore" @click="loadMore">
          <u-loadmore :status="loadStatus"></u-loadmore>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import {
    removeHtmlTag
  } from '@/utils/index.js';
  export default {
    props: ['type', 'title'],
    data() {
      return {
        scrollTop: 0,
        old: {
          scrollTop: 0
        },
        query: {
          current: 1,
          size: 20,
          folderId: 0,
          formName: ''
        },
        loadStatus: 'loadmore',
        list: [],
        total: 0,
      };
    },
    created() {
      this.loadList()
    },
    methods: {
      removeHtmlTag(str) {
        return removeHtmlTag(str);
      },
      lower(e) {
        this.loadMore();
      },
      scroll(e) {
        this.old.scrollTop = e.detail.scrollTop
      },
      loadMore() {
        if (this.list.length >= this.total || this.loadStatus === 'loading') {
          return;
        }
        this.loadStatus = "loading";
        this.query.current = this.query.current + 1;
        this.$nextTick(() => {
          this.loadList();
        })
      },
      loadList() {
        uni.showLoading({
          title: '加载中...'
        })
        const handelThen = (res) => {
          if (!res.records || res.records.length == 0 || this.list.length >= res.total) {
            this.loadStatus = "nomore";
            return;
          }
          this.list = this.list.concat(res.records);
          this.total = res.total;
          this.loadStatus = "loadmore";
          uni.hideLoading();
          uni.stopPullDownRefresh();
        }
        this.$u.api.listTodo(this.query).then(handelThen);
      },
      onSearch(value) {
        this.list = [];
        this.query.current = 0;
        this.query.formName = value || '';
        this.loadList();
      },
    }
  };
</script>
<style lang="scss" scoped>
  page {
    height: 100%;
    background-color: $u-bg-color;
  }

  .scroll-Y {
    height: 72vh;
  }

  .list {
    margin: -12.68rpx;
    font-size: 25.36rpx;

    .list-item {
      width: 100%;
      padding: 22.68rpx;
    }

    .list-item-body {
      background-color: #fff;
      border-radius: 18.12rpx;
      position: relative;
      // padding: 36.23rpx;
      padding-bottom: 0;
    }

    .type-name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15rpx 40rpx;
    }

    .form-status {
      padding: 15rpx 40rpx;
    }

    .form-name {
      font-size: 28rpx;
      color: $u-main-color;
      line-height: 50rpx;
    }

    .body {
      padding: 0rpx;
    }

    .time {
      // margin-top: 40rpx;
      padding: 0 40rpx;
      color: #999da4;
    }

    .form-btn {
      color: #5677fc;
      text-align: center;
      justify-content: flex-end;
      padding: 20rpx 40rpx;
    }
  }

  .hide-nav {
    height: 0;
    overflow: hidden;
  }

  .tag {
    font-size: 24rpx;
    color: #989898;
    margin-left: 8rpx;
  }
</style>
